<template>
  <el-button type="primary" @click="addUser">新增</el-button>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column fixed prop="userName" label="用户名" />
    <el-table-column prop="userNickName" label="昵称" />
    <el-table-column fixed="right" label="操作">
      <template v-slot="scope">
        <el-button link type="primary" size="small" @click="Deleuseinfo(scope.row)">删除</el-button>
        <el-button link type="primary" size="small" @click="AddUsersRole(scope.row)">设置角色</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog v-model="dialogFormVisible" title="新增用户" width="500">
    <el-form :model="form">
      <el-form-item label="用户名">
        <el-input v-model="form.userName" />
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="form.userPwd" type="password" />
      </el-form-item>
      <el-form-item label="昵称">
        <el-input v-model="form.userNickName" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="userinfoadd()">确定</el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog v-model="dialogUserRoleformVisible" title="设置角色" width="500">
    <el-form :model="UserRoleform">
      <el-form-item label="用户名">
        <el-input v-model="UserRoleform.userName" disabled />
      </el-form-item>
      <el-form-item label="角色">
        <el-checkbox-group v-model="UserRoleform.roleId">
          <el-checkbox v-for="types in UserRoleform.userrole" :label="types.roleName" :value="types.id"> {{types.roleName  }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogUserRoleformVisible = false">取消</el-button> 
        <el-button type="primary" @click="addUsersRole()">
         确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { GetUsers, Userinfo, GetRole,UserRoleinsert,DelUsers,GetUser } from "@/api/RBACMain/rbac";
const tableData = ref([])
onMounted(() => {
  getUserinfo()
})
const dialogFormVisible = ref(false);
// ////////获取用户信息/////////////
const getUserinfo = () => {
  GetUsers().then((res) => {
    tableData.value = res.data
  })
}
const form = reactive({
  id:'',
  userName: '',
  userPwd: '',
  userNickName: '',
  UserErrorCount: 0,
  UserIsLock: false,
});
const addUser = () => {
  dialogFormVisible.value = true
}
const userinfoadd = () => {
  Userinfo(form).then((res) => {
    if (res.code == 200) {
      ElMessage.success('添加成功')
      dialogFormVisible.value = false
      getUserinfo()
    } else {
      ElMessage.error('添加失败')
    }
  })
}
const dialogUserRoleformVisible = ref(false);
const AddUsersRole = (row: any) => {
  dialogUserRoleformVisible.value = true
  UserRoleform.userName = row.userName
  UserRoleform.userId = row.id
  console.log(row)
  GetUserRole()
}
const UserRoleform = reactive({
  userName: '',
  userId: '',
  userrole: [],
  roleId:[],
})
const GetUserRole=()=>{
  GetRole().then((res)=>{
    UserRoleform.userrole=res.data
  })
}
const addUsersRole = () => {
  dialogUserRoleformVisible.value = true
  UserRoleinsert(UserRoleform).then((res) => {
    if (res.code == 200) {
      ElMessage.success('添加成功')
      dialogUserRoleformVisible.value = false
      getUserinfo()
    } else {
      ElMessage.error('添加失败')
    }
  })
}

const Deleuseinfo=(row: any)=>{
  ElMessageBox.confirm(
    '确定要删除吗?',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => { 
      DelUsers(row.id).then((res)=>{
    if (res.code == 200) {
      ElMessage.success('删除成功')
      dialogUserRoleformVisible.value = false
      getUserinfo()
    } else {
      ElMessage.error('删除失败')
    }
  })

    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })


  
}

</script>
